<template>
  <body>
  <div id="headinfo_wrap" class="headinfo_wrap">
    <img src="@/assets/chuyin.png">
  </div>
  <div id="userinfo_wrap" class="userinfo_wrap clearfix">
    <div class="userinfo_left">
      <div class="userinfo_left_head" id="j_userhead" data-sign="touxiang1.png" title="点击查看高清头像">
        <a href="javascript:;" style class="userinfo_head">
          <img src="@/assets/touxiang1.png">
        </a>
      </div>
    </div>
    <div class="userinfo_middle">
      <div class="userinfo_relation"></div>
      <div class="userinfo_title">
        <span class="userinfo_username">{{ this.nickname }}</span>
      </div>
      <div class="userinfo_num">
        <div class="userinfo_userdata">
            <span class="user_name">用户名:{{ this.nickname }}
              <span class="userinfo_split"></span>
              <span>等级:{{ this.level }}</span>
              <span class="userinfo_split"></span>
              <span>发帖:{{ this.postCount }}</span>
            </span>
        </div>
      </div>
      <div class="userinfo_honor"></div>

    </div>
  </div>
  <div id="container" class="container_wrap clearfix ihome_body">
    <div class="left_aside ihome_left_aside">
      <div class="content_wrap">
        <div id="ihome_nav_wrap" class="ihome_nav_wrap">
          <ul class="ihome_nav_list">
            <li class="focus">
              <div class="tbnav_tab_inner">
                <p class="space">
                  <i class="el-icon-s-custom"></i>
                  <a class="nav_icon nav_main">
                    我的主页
                  </a>
                </p>
              </div>
            </li>
            <!--              <li>        <div class="tbnav_tab_inner">                    <p class="space">                    <a class="nav_icon nav_msg" href="/home/msg?un=%E5%90%AC%E4%B8%80%E5%A4%9C%E9%A3%8E%E5%90%B9%E9%9B%A899&amp;fr=home&amp;id=tb.1.3274d0b2.rk0wMBBKh6IWeT1JTQQboA" locate="tab_msg#ihome_v1" target="_blank">通知</a></p>                    <span></span>                    </div></li>
                          <li>        <div class="tbnav_tab_inner">                    <p class="space">                    <a class="nav_icon nav_collect" href="/home/collect?un=%E5%90%AC%E4%B8%80%E5%A4%9C%E9%A3%8E%E5%90%B9%E9%9B%A899&amp;fr=home&amp;id=tb.1.3274d0b2.rk0wMBBKh6IWeT1JTQQboA" locate="tab_collect#ihome_v1" target="_blank">收藏</a></p>                    <span></span>                    </div></li>
                          <li>        <div class="tbnav_tab_inner">                    <p class="space">                    <a class="nav_icon nav_concern" href="/home/forum?un=%E5%90%AC%E4%B8%80%E5%A4%9C%E9%A3%8E%E5%90%B9%E9%9B%A899&amp;fr=home&amp;id=tb.1.3274d0b2.rk0wMBBKh6IWeT1JTQQboA" locate="tab_forum#ihome_v1" target="_blank">关注的吧</a></p>                    </div></li>
                          <li>        <div class="tbnav_tab_inner">                    <p class="space">                    <a class="nav_icon nav_post" href="/home/post?un=%E5%90%AC%E4%B8%80%E5%A4%9C%E9%A3%8E%E5%90%B9%E9%9B%A899&amp;fr=home&amp;id=tb.1.3274d0b2.rk0wMBBKh6IWeT1JTQQboA" locate="tab_post#ihome_v1" target="_blank">贴子</a></p>                    </div></li>
                          <li>        <div class="tbnav_tab_inner">                    <p>                    <a class="nav_icon nav_achieve" href="/home/achievement?un=%E5%90%AC%E4%B8%80%E5%A4%9C%E9%A3%8E%E5%90%B9%E9%9B%A899&amp;fr=home&amp;id=tb.1.3274d0b2.rk0wMBBKh6IWeT1JTQQboA" locate="tab_achieve#ihome_v1">成就</a></p>                    </div></li>-->
          </ul>
        </div>
        <div class="ihome_hot_feed ihome_section">
          <h1 class="threadList_title"><span class="cut_line">|</span>热门动态</h1>
          <ul class="new_list clearfix">
            <div class="n_right clearfix" v-for="(postItem,i) in this.posts" :key="i">
              <div class="n_avatar">
                <a target="_blank" title="武汉大学">
                  <img src="@/assets/whu.png">
                </a>
              </div>
              <div class="n_contain">
                <div>
                  <div class="title_wraper">
                    <div class="n_post_time">{{postItem.dateTime}}</div>
                    <a target="_blank" class="n_name" title="武汉大学">{{postItem.tag}}</a>
                  </div>
                  <div class="thread_name">
                    <a target="_blank" class="title" locate="feed_title#ihome_v1"
                       >{{postItem.title}}</a>
                  </div>
                </div>
                <div @click="jumpToDetail(postItem.pid)" class="n_txt"><a  target="_blank" class="title" locate="feed_title#ihome_v1"
                >{{postItem.content}}</a></div>
                <div class="n_reply">
                  <span class="userinfo_split"></span>
                  <span class="post_num">{{postItem.replies}}</span>
                </div>
              </div>
            </div>

          </ul>
          <el-pagination
              background
              :page-size="this.pagesize"
              layout="prev, pager, next"
              :total="this.postCount"
              @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
  </body>
</template>

<script>
export default {
  name: "MyInfo",
  data() {
    return {
      uid: 0,
      nickname: '',
      avatar: '',
      level: 0,
      postCount: 2,
      pagesize:5,
      posts: [
        {
          pid: 1,
          title: 'JavaEE大作业真难搞',
          content:'',
          likes: 10,
          replies: 20,
          time:'2021-12-12',
          tag: "j2ee"
        },
        {
          pid: 2,
          title: 'JavaEE大作业真难搞',
          content: '',
          likes: 12,
          replies: 200,
          time: '2021-12-13',
          tag:"whu"
        }
      ]
    }
  },
  methods: {
    async getPost(page, size) {
      try {
        var res = await this.$http.post('/api/posts/userpost/'+"?uid="+this.uid, {
          page: page,
          size: size
        })
        console.log(res.data)
        var result = res.data
        var success = result.success
        if (success) {
          this.posts = result.data
        } else {
          var msg = result.msg
          this.$alert("请求异常:" + msg + ",请刷新")
        }
      } catch (error) {
        console.log(error)
        this.$alert("请求异常，请刷新")
      }
    },
    handleCurrentChange(page){
      this.getPost(page - 1,this.pagesize)
    },
    jumpToDetail(pid){
      this.$router.push('/Detail/'+pid)
    }
  },
  async created() {
    this.uid = this.$route.params.uid
    try {
      var res = await this.$http.get('/api/user/userInfo/' + this.uid)
      console.log(res.data)
      var result = res.data
      var success = result.success
      if (success) {
        var data = result.data
        this.nickname = data.userName
        this.avatar = data.avatar
        this.level = data.level
        this.postCount = data.postCount
        this.uid = data.userId
      } else {
        var msg = result.msg
        await this.$alert("请求异常" + msg)
        this.$router.back()
      }
    } catch (error) {
      console.log(error)
      await this.$alert("请求异常")
      this.$router.back()
    }
    this.getPost(0, this.pagesize)
  }

}
</script>

<style scoped>
.headinfo_wrap {
  width: 980px;
  height: 180px;
  margin: 20px auto 0;
  position: relative;
}

.userinfo_wrap {
  min-height: 110px;
  width: 980px;
  margin: 0 auto;
  border-style: solid;
  border-color: #8FC0D3;
  border-width: 0 1px;
  background: #F5F7FA;
  position: relative;
}

.userinfo_left {
  position: relative;
  width: 190px;
  height: 110px;
  float: left;
}

.userinfo_left_head {
  left: 17px;
  position: absolute;
  top: -65px;
}

.userinfo_head img {
  width: 150px;
  height: 150px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.userinfo_middle {
  width: 500px;
  float: left;
}

.userinfo_relation {
  position: relative;
  left: 0;
  top: 0;
  zoom: 1;
}

.userinfo_title {
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  height: 26px;
  line-height: 26px;
  margin-top: 10px;
  overflow: hidden;
}

.userinfo_num {
  margin-top: 4px;
  color: #797C80;
  overflow: hidden;
  zoom: 1;
}

.userinfo_honor {
  margin-bottom: 9px;
  position: relative;
}

.userinfo_username {
  float: left;
}

.container_wrap {
  width: 980px;
  margin: 0 auto;
}

element.style {
}

.userinfo_wrap {
  min-height: 110px;
  width: 978px;
  margin: 0 auto;
  border-style: solid;
  border-color: #8FC0D3;
  border-width: 0 1px;
  background: #F5F7FA;
  position: relative;
}

.clearfix {
  zoom: 1;
}

.ihome_body {
  border-bottom: 1px solid #87BED9;
}

element.style {
}

.ihome_left_aside {
  padding-bottom: 20px;
}

.left_aside {
  width: 100%;
  float: left;
  background: url(//tb2.bdstatic.com/tb/static-ihome/img/content_bg_30a9c8a.jpg) repeat-y;
}

.content_wrap {
  width: 980px;
}

.ihome_nav_wrap {
  height: 60px;
  background-repeat: repeat-x;
  margin-left: -20px;
}

.ihome_nav_list {
  height: 46px;
  font-family: STHeiti, "Microsoft Yahei", Arial, SimSun;
  font-size: 16px;
  float: left;
  overflow: hidden;
}

.ihome_nav_list .focus {
  background-repeat: repeat-x;
  background-position: 0 -100px;
}

.ihome_nav_list .focus .tbnav_tab_inner {
  background-repeat: no-repeat;
  background-position: left -250px;
}

.ihome_nav_list .focus .space {
  background-position: right -250px;
}

.ihome_nav_list a.nav_main {
  background-position: 22px -339px;
}

.ihome_section {
  margin: 20px 20px 0;
}

.threadList_title {
  color: #494A4C;
  font-family: STHeiti, "Microsoft Yahei", Arial, SimSun;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;

}

.threadList_title .cut_line {
  color: #4585E6;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  vertical-align: top;
  margin-right: 4px;
  text-align: left;
}

.userinfo_userdata, userinfo_appraise {
  float: left;
}

.userinfo_sex_male {
  background-position: 0 -32px;
}

.userinfo_sex {
  background: url(//tb2.bdstatic.com/tb/static-ihome/img/icon_groups_efa01ec.png) no-repeat;
  display: inline-block;
  height: 14px;
  margin: -3px 4px 0 0;
  vertical-align: middle;
  width: 14px;
}

.ihome_nav_list li {
  height: 46px;

  float: left;
  display: inline;
  margin-left: -2px;
}

.new_list {
  margin-left: -40px;
}

n_right {
  width: 690px;
  border-top: 1px dotted #E1E3E6;
  position: relative;
  padding-top: 15px;
  margin-bottom: 12px;
}

.new_list .n_post_time {
  position: absolute;
  font-family: Arial SimSun;
  font-size: 12px;
  line-height: 12px;
  color: #919499;
  height: 0px;
  right: 0;
}

.n_avatar {
  float: left;
  margin: 2px 10px 0 0;
  position: relative;

}

.n_avatar img {
  width: 43px;
  height: 43px;
}

.n_contain {
  float: left;
  width: 630px;
  position: relative;
}

.title_wraper {
  margin-bottom: 0px;
  text-align: left;
}

.new_list .n_name, .new_list .n_name:hover {
  font-size: 12px;
  color: #666;
}

.thread_name {
  position: relative;
  text-align: left;
}

element.style {
}

.new_list .title, .new_list .title:hover {
  font-size: 14px;
  line-height: 14px;
  color: #2962B6;
}

.n_txt {
  line-height: 12px;
  color: #919499;
  font-size: 12px;
  margin: 7px 0 10px;
  text-align: left;
}

.n_reply {
  margin-top: 13px;
  line-height: 18px;
  text-align: left;
}

.new_list .post_author {
  color: #919499;
  padding-left: 16px;
  background: url(//tb2.bdstatic.com/tb/static-ihome/img/icon_groups_efa01ec.png) no-repeat 0 -119px;
}

.userinfo_split {
  border-color: #CCC;
  border-style: solid;
  border-width: 0 0 0 1px;
  display: inline-block;
  height: 10px;
  line-height: 10px;
  margin: 0 10px 2px 9px;
  vertical-align: middle;
}

.new_list .post_num {
  color: #999;
  padding-left: 16px;
  background: url(//tb2.bdstatic.com/tb/static-ihome/img/icon_groups_efa01ec.png) no-repeat 0 -149px;
}

.n_right {
  width: 700px;
  border-top: 1px dotted #E1E3E6;
  position: relative;
  padding-top: 0px;
  margin-bottom: 150px;
}
</style>
